<template>
  <q-page class="cc-admin column q-pa-sm">
    <div class="col column bg-white shadow-2">
      <div id="mainChart" class="col"></div>
    </div>
  </q-page>
</template>

<script>
import echarts from 'echarts';

export default {
  name: 'Demo14',
  components: {
  },
  data() {
    return {
    };
  },
  methods: {
  },
  computed: {
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('mainChart'));

    const option = JSON.parse('{"tooltip":{"trigger":"axis"},"legend":{"data":["trend","2010","2011","2012","2013","2014","2015","2016"]},"dataZoom":[{"type":"slider","start":50,"end":70},{"type":"inside","start":50,"end":70}],"xAxis":{"data":["category0","category1","category2","category3","category4","category5","category6","category7","category8","category9","category10","category11","category12","category13","category14","category15","category16","category17","category18","category19","category20","category21","category22","category23","category24","category25","category26","category27","category28","category29"]},"yAxis":{},"series":[{"type":"custom","name":"trend","itemStyle":{"borderWidth":2},"encode":{"x":0,"y":[1,2,3,4,5,6,7]},"data":[[0,451.68,387.38,363.44,421.68,327.64,309.22,397.99],[1,324.97,332.23,305.74,372.44,383.81,446.32,388.02],[2,961.25,897.71,978.94,940.5,859.93,885.63,801.18],[3,47.32,88.62,146.41,204.84,286.6,304.51,369.71],[4,408.2,481.93,525.38,606.34,595.44,595.41,625.89],[5,423.31,341.59,375.51,347.99,320.78,279.32,238.7],[6,383.34,450.21,407.9,429.72,411.07,388.83,379.85],[7,45.32,50.25,52.61,40.64,0,60.32,148.32],[8,5.46,27.91,54.43,89.02,101.51,80.31,55.87],[9,869.89,917.25,860.82,840.96,912.11,868.37,913.05],[10,972.99,1013.6,1018.79,947.11,890.61,953.65,937.61],[11,187.76,256.6,221.23,289.52,327.32,280.32,353.18],[12,245.96,161.16,123.63,154.74,233.79,213.86,232.9],[13,651.45,682.84,682.51,637.11,584,665.21,697.2],[14,785.61,778.91,862.33,870.19,897.8,845.98,750.78],[15,97.61,137.05,100.55,1.19,0,0,71.09],[16,432.01,463.66,456.46,521.16,437.07,392.05,457.21],[17,299.05,369.76,362.04,385.58,346.42,307.79,384.71],[18,979.42,1059.01,1017,918.57,895.68,973.47,996.88],[19,406.4,463.03,425.55,458.02,368.79,277.54,233.47],[20,56.53,56.63,146.23,243.68,322.87,231.21,140.19],[21,131.1,169.77,183.61,208.71,191.48,117.17,78.51],[22,291.56,342.49,395.49,473.78,518.1,609.67,639.15],[23,749.97,773.44,845.55,789.75,871.81,779.18,724.28],[24,919.38,870.11,935.99,932.17,999.79,981.14,1065.43],[25,239.98,161.01,126.57,149.48,63.03,128.04,89.29],[26,497.07,438.91,407.64,386.29,360.9,455.76,517.36],[27,645.51,619.49,523.53,431.91,428.6,432.6,409.35],[28,712.95,620.15,681.55,774.59,801.5,831.11,806.8],[29,711.22,695.02,699.3,770.09,834.04,778.21,750]],"z":100},{"type":"bar","animation":false,"name":"2010","itemStyle":{"opacity":0.5},"data":[451.68,324.97,961.25,47.32,408.2,423.31,383.34,45.32,5.46,869.89,972.99,187.76,245.96,651.45,785.61,97.61,432.01,299.05,979.42,406.4,56.53,131.1,291.56,749.97,919.38,239.98,497.07,645.51,712.95,711.22]},{"type":"bar","animation":false,"name":"2011","itemStyle":{"opacity":0.5},"data":[387.38,332.23,897.71,88.62,481.93,341.59,450.21,50.25,27.91,917.25,1013.6,256.6,161.16,682.84,778.91,137.05,463.66,369.76,1059.01,463.03,56.63,169.77,342.49,773.44,870.11,161.01,438.91,619.49,620.15,695.02]},{"type":"bar","animation":false,"name":"2012","itemStyle":{"opacity":0.5},"data":[363.44,305.74,978.94,146.41,525.38,375.51,407.9,52.61,54.43,860.82,1018.79,221.23,123.63,682.51,862.33,100.55,456.46,362.04,1017,425.55,146.23,183.61,395.49,845.55,935.99,126.57,407.64,523.53,681.55,699.3]},{"type":"bar","animation":false,"name":"2013","itemStyle":{"opacity":0.5},"data":[421.68,372.44,940.5,204.84,606.34,347.99,429.72,40.64,89.02,840.96,947.11,289.52,154.74,637.11,870.19,1.19,521.16,385.58,918.57,458.02,243.68,208.71,473.78,789.75,932.17,149.48,386.29,431.91,774.59,770.09]},{"type":"bar","animation":false,"name":"2014","itemStyle":{"opacity":0.5},"data":[327.64,383.81,859.93,286.6,595.44,320.78,411.07,0,101.51,912.11,890.61,327.32,233.79,584,897.8,0,437.07,346.42,895.68,368.79,322.87,191.48,518.1,871.81,999.79,63.03,360.9,428.6,801.5,834.04]},{"type":"bar","animation":false,"name":"2015","itemStyle":{"opacity":0.5},"data":[309.22,446.32,885.63,304.51,595.41,279.32,388.83,60.32,80.31,868.37,953.65,280.32,213.86,665.21,845.98,0,392.05,307.79,973.47,277.54,231.21,117.17,609.67,779.18,981.14,128.04,455.76,432.6,831.11,778.21]},{"type":"bar","animation":false,"name":"2016","itemStyle":{"opacity":0.5},"data":[397.99,388.02,801.18,369.71,625.89,238.7,379.85,148.32,55.87,913.05,937.61,353.18,232.9,697.2,750.78,71.09,457.21,384.71,996.88,233.47,140.19,78.51,639.15,724.28,1065.43,89.29,517.36,409.35,806.8,750]}]}');

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  },
};
</script>

<style lang="stylus"></style>
